/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import React, { memo, useMemo } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import type { AdaptiveCenterSheetHeaderProps } from './types';
import { styles } from './styles';
import { DEFAULT_CLOSE_BUTTON_COLOR, DEFAULT_BUTTON_POSITION } from './constants';

const AdaptiveCenterSheetHeaderComponent = ({
  title,
  height,
  showCloseButton = true,
  closeButtonPosition = DEFAULT_BUTTON_POSITION,
  onClose,
  headerStyle,
  titleStyle,
  closeButtonStyle,
  closeButtonColor = DEFAULT_CLOSE_BUTTON_COLOR,
  closeButtonComponent,
  leftButton,
  rightButton,
  onLeftPress,
  onRightPress,
}: AdaptiveCenterSheetHeaderProps): JSX.Element => {
  const headerContainerStyle = useMemo(() => [styles.header, height ? { height } : null, headerStyle], [headerStyle, height]);

  const titleTextStyle = useMemo(() => [styles.title, titleStyle], [titleStyle]);

  const closeButtonContainerStyle = useMemo(() => [styles.closeButton, closeButtonStyle], [closeButtonStyle]);

  const renderCloseButton = (): JSX.Element | null => {
    if (!showCloseButton) {
      return null;
    }

    if (closeButtonComponent) {
      return (
        <TouchableOpacity onPress={onClose} style={closeButtonContainerStyle} activeOpacity={0.7}>
          {closeButtonComponent}
        </TouchableOpacity>
      );
    }

    return (
      <TouchableOpacity onPress={onClose} style={closeButtonContainerStyle} activeOpacity={0.7}>
        <Text style={[styles.closeIcon, { color: closeButtonColor }]}>×</Text>
      </TouchableOpacity>
    );
  };

  const renderLeftButton = (): JSX.Element => {
    // 如果关闭按钮在左侧，显示关闭按钮
    if (closeButtonPosition === 'left' && showCloseButton) {
      return <View style={styles.leftButtonContainer}>{renderCloseButton()}</View>;
    }

    // 否则显示自定义左侧按钮
    if (leftButton) {
      return (
        <View style={styles.leftButtonContainer}>
          <TouchableOpacity onPress={onLeftPress} style={styles.leftButton} activeOpacity={0.7}>
            {leftButton}
          </TouchableOpacity>
        </View>
      );
    }

    return <View style={styles.leftButtonContainer} />;
  };

  const renderRightButton = (): JSX.Element | null => {
    // 如果关闭按钮在右侧，显示关闭按钮
    if (closeButtonPosition === 'right' && showCloseButton) {
      return <View style={styles.rightButtonContainer}>{renderCloseButton()}</View>;
    }

    // 否则显示自定义右侧按钮
    if (rightButton) {
      return (
        <View style={styles.rightButtonContainer}>
          <TouchableOpacity onPress={onRightPress} style={styles.rightButton} activeOpacity={0.7}>
            {rightButton}
          </TouchableOpacity>
        </View>
      );
    }

    return <View style={styles.rightButtonContainer} />;
  };

  return (
    <View>
      {/* 主标题栏 */}
      <View style={headerContainerStyle}>
        {renderLeftButton()}
        {title && <Text style={titleTextStyle}>{title}</Text>}
        {renderRightButton()}
      </View>
    </View>
  );
};

const AdaptiveCenterSheetHeader = memo(AdaptiveCenterSheetHeaderComponent);
AdaptiveCenterSheetHeader.displayName = 'AdaptiveCenterSheetHeader';

export default AdaptiveCenterSheetHeader;
